<template>
	<view class="bt100">
		<view class='order-details'>
			<!-- 给header上与data上加on为退款订单-->
			<view class='header bg-color acea-row row-middle' :class='isGoodsReturn ? "on":""'>
				<view class='pictrue' v-if="isGoodsReturn==false">
					<image :src="orderInfo.status_pic"></image>
				</view>
				<view class='data' :class='isGoodsReturn ? "on":""'>
					<view class='state'>{{orderInfo._status._msg}}</view>
					<view>{{orderInfo.add_time_y}}<text class='time'>{{orderInfo.add_time_h}}</text></view>
				</view>
			</view>
			<view v-if="isGoodsReturn==false">
				<view class='address' v-if="orderInfo.shipping_type === 1">
					<view class='name'>{{orderInfo.real_name}}<text class='phone'>{{orderInfo.user_phone}}</text></view>
					<view>{{orderInfo.user_address}}</view>
				</view>
				<view class='address' v-else style="margin-top:0;">
					<view class='name' @tap="makePhone">{{orderInfo.system_store.name}}<text class='phone'>{{orderInfo.system_store.phone}}</text><text
						 class="iconfont icon-tonghua font-color"></text></view>
					<view>{{orderInfo.system_store._detailed_address}}</view>
				</view>
				<view class='line' v-if="orderInfo.shipping_type === 1">
					<image src='../../../../static/images/line.jpg'></image>
				</view>
			</view>

			<view class='wrapper'>
				<view class='item acea-row row-between'>
					<view>订单编号：</view>
					<view class='conter acea-row row-middle row-right'>{{orderInfo.order_id}}
						<!-- #ifndef H5 -->
						<text class='copy' @tap='copy'>复制</text>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<text class='copy copy-data' :data-clipboard-text="orderInfo.order_id">复制</text>
						<!-- #endif -->
					</view>
				</view>
				<view class='item acea-row row-between'>
					<view>下单时间：</view>
					<view class='conter'>{{orderInfo._pay_time || 0}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>订单状态：</view>
					<!-- confirmPay -->
					<view class="conter" @click="changeConfirmPay">{{ orderInfo._status._title || '未知'}}</view>
					<!-- <view class='conter' v-if="orderInfo.paid">已支付</view>
					<view class='conter' v-else>未支付</view> -->
				</view>
				<view class='item acea-row row-between'>
					<view>支付状态：</view> 
					<view class="confirm_pay" @click="changeConfirmPay">{{ confirmPay}}</view> 
				</view>

				<view class='item acea-row row-between'>
					<view>支付方式：</view>
					<view class='conter'>{{orderInfo._status._payType}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>商家备注：</view>
					<view class='conter'>{{orderInfo.remark}}</view>
				</view>
			</view>

			<!-- 退款订单详情 -->
			<view class='wrapper' v-if="isGoodsReturn">
				<view class='item acea-row row-between'>
					<view>收货人：</view>
					<view class='conter'>{{orderInfo.real_name}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>联系电话：</view>
					<view class='conter'>{{orderInfo.user_phone}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>收货地址：</view>
					<view class='conter'>{{orderInfo.user_address}}</view>
				</view>
			</view>
			<view v-if="orderInfo.status!=0">
				<view class='wrapper' v-if='orderInfo.delivery_type=="express"'> 
					<view class='item acea-row row-between'>
						<view>配送方式：</view>
						<view class='conter'>发货</view>
					</view>
					<view class='item acea-row row-between'>
						<view>快递公司：</view>
						<view class='conter'>{{orderInfo.delivery_name || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>快递号：</view>
						<view class='conter'>{{orderInfo.delivery_id || ''}}</view>
					</view>
					<view class="change_delivery" @click="changeDelivery">订单信息</view>
				</view>
			 
				<view class='wrapper' v-else-if='orderInfo.delivery_type=="send"'>
					<view class='item acea-row row-between'>
						<view>配送方式：</view>
						<view class='conter'>送货</view>
					</view>
					<view class='item acea-row row-between'>
						<view>配送人姓名：</view>
						<view class='conter'>{{orderInfo.delivery_name || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>联系电话：</view>
						<view class='conter acea-row row-middle row-right'>{{orderInfo.delivery_id || ''}}<text class='copy' @tap='goTel'>拨打</text></view>
					</view> 
					<view class="change_delivery">配送信息</view>
				</view>  
			</view>
			<view class='wrapper'>
				<view class='item acea-row row-between'>
					<view>支付金额：</view>
					<view class='conter'>￥{{orderInfo.total_price}}</view>
				</view>
				<view class='item acea-row row-between' v-if='orderInfo.coupon_id'>
					<view>优惠券抵扣：</view>
					<view class='conter'>-￥{{orderInfo.coupon_price}}</view>
				</view>
				<view class='item acea-row row-between' v-if="orderInfo.use_integral > 0">
					<view>积分抵扣：</view>
					<view class='conter'>-￥{{orderInfo.deduction_price}}</view>
				</view>
				<view class='item acea-row row-between' v-if="orderInfo.pay_postage > 0">
					<view>运费：</view>
					<view class='conter'>￥{{orderInfo.pay_postage}}</view>
				</view>
				<view class='actualPay acea-row row-right'>实付款：<text class='money font-color'>￥{{orderInfo.pay_price}}</text></view>
			</view>
			<!-- 订单备注 -->
			<view class="courier_remarks">
				<text>订单备注</text>
				<textarea class="textarea" name="" id="" cols="30" rows="10" placeholder="输入或更改备注信息" v-model="remarksInfo"></textarea>
				<text @click="submitNotes">提交</text>
			</view>
			<!-- 按钮 -->
			<!-- {{ orderInfo.refund_status }}/{{ orderInfo.status }} -->
			<view class="courier_btn">
				<text class="del" @click="deleteOrder">删除订单</text>
				<text @click="shipOrder" v-if="orderInfo.status === 0">发货</text>
				<text @click="orderRecording" v-if="orderInfo.status != 0">配送信息</text>
				<!-- <text @click="changeOrder" style="background-color: #e93323; color: #fff; border: none;">修改订单</text> -->
				<text @click="changeConfirmPay" style="background-color: #e93323; color: #fff; border: none;">确认支付</text>
				<text @click="refundNow" v-if="orderInfo.status === -1 && orderInfo.refund_status == 1" >立即退款</text>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="select_type" v-show="isShowSelectType" @click="downSelectType(false)">
			<view class="select_type_item">
				<!-- 如果是订单记录和修改订单 不展示选择 -->
				<view class="cont_type" @click.stop v-show="selectConts !== 3 && selectConts !== 4 && selectConts !== 5">
					<text>选择类型: </text>
					<radio-group @change="radioChange" style="display: flex; margin-left:20rpx">
						<label class="uni-list-cell uni-list-cell-pd" style="flex:1" v-for="(item, index) in items" :key="item.value">
							<view style="margin: 0 10rpx;">
								<radio :value="item.value" :checked="item.checked" />
								<text>{{item.name}}</text>
							</view>
						</label>
					</radio-group>
				</view>
				<!-- 已选择的内容 发货 -->
				<view class="select_cont" v-show="selectConts == 1" @click.stop>
					<view style=" line-height: 60rpx; flex-direction: column;"> 
					<text style="position: absolute; ">快递公司</text>
						<view class="select_area" @click.stop="selectAreaChilds" style="margin-left: 140rpx; flex: 1;">
							{{deliveryName}}
							<image class='select_area_img' :class="isShowSelectChild? 'area_img_turn':'area_img_down'" src="../../../../static/images/xiala.png"
							 mode=""></image>
						</view>
						
						<scroll-view class="area_list"  scroll-y v-show="isShowSelectChild">
							<view class="area_item" v-for="(item,index) in expressList" :key='item.id' @click.stop="currentAreaName(item)">{{item.value}}</view>
						</scroll-view>
					</view>
					 <view style="display: flex; line-height: 130rpx;">
						 <text>快递单号</text>
						 <input class="select_area_inp" style="flex: 1; margin-left: 30rpx;" type="text" v-model="deliveryId" placeholder="输入快递单号">
					 </view>
					 
				</view>

				<!-- 送货 -->
				<view class="select_conts" v-show="selectConts == 2" @click.stop>
					<view class="select_areas">
						<text>送货人姓名:</text>
						<input type="text" placeholder="请输入送货人姓名" v-model="shDeliveryName">
					</view>
					<view class="select_areas">
						<text>送货人电话:</text>
						<input type="text" placeholder="请输入送货人电话" v-model="shDeliveryId">
					</view>
				</view>
				<!-- 快递详情 -->
			<!-- 	<view class="express_details" v-show="selectConts == 3">
					<text class="express_tit">快递详情</text>
					<scroll-view scroll-y class="express_list">
						<view class="express_liitem" v-for="(item,index) in lecordingList" :key="index">
							<text>{{item.change_time}}</text>

							<text>{{item.change_message}}</text>
						</view>
					</scroll-view>
				</view> -->

				<!-- 修改订单 -->
				<view class="change_order" v-show="selectConts == 4">
					<view class="change_items">
						<text>订单编号:</text> 
						<input type="text" class="change_inp" v-model="orderInfo.order_id"  @click.stop>
					</view>
					<view class="change_items">
						<text>商品总价:</text>
						<input type="text" class="change_inp"  v-model="orderInfo.total_price"  @click.stop>
					</view>
					<view class="change_items">
						<text>原始邮费:</text>
						<input type="text" class="change_inp" v-model="orderInfo.pay_postage" @click.stop>
					</view>
					<view class="change_items">
						<text>实际支付金额:</text>
						<input type="text" class="change_inp" v-model="orderInfo.pay_price" @click.stop>
					</view>
					<view class="change_items">
						<text>实际支付邮费:</text>
						<input type="text" class="change_inp" v-model="orderInfo.total_postage" @click.stop>
					</view>
					<view class="change_items">
						<text>赠送积分:</text>
						<input type="text" class="change_inp" v-model="orderInfo.gain_integral" @click.stop>
					</view>
				</view>
				<!-- 修改配送信息 -->
				<view class="change_peisong" @click.stop v-show="selectConts == 5">
					<view style="display: flex;">
						<view style="margin-right: 40rpx; line-height: 90rpx;">
							<text>订单号</text>
						</view>
						<input disabled style="flex: 1; font-size: 26rpx;" class="select_area_inp" type="text" v-model="orderInfo.order_id" placeholder="输入快递单号">
					</view>
					<view style="display: flex; line-height: 90rpx;">
						<view style="margin-right: 20rpx; font-size: 26rpx;">
							快递公司
						</view>
						<view style="flex: 1;">
							<view class="select_area" style="font-size: 26rpx;" @click.stop="selectAreaChilds">
								{{deliveryName}}
								<image class='select_area_img' :class="isShowSelectChild? 'area_img_turn':'area_img_down'" src="../../../../static/images/xiala.png"
								 mode=""></image>
							</view> 
							<scroll-view class="area_list" scroll-y v-show="isShowSelectChild">
								<view class="area_item" v-for="(item,index) in expressList" :key='item.id' @click.stop="currentAreaName(item)">{{item.value}}</view>
							</scroll-view> 
						</view>
					</view>
					<view style="display: flex; font-size: 26rpx;">
						<view style="margin-right: 20rpx; line-height: 90rpx;">
							<text>快递单号</text>
						</view>
						<input style="flex: 1; font-size: 26rpx;" class="select_area_inp" type="text" v-model="deliveryId" placeholder="输入快递单号">
					</view>
					
				</view>
				<view class="select_xz">
					<!-- <text @click.stop="downSelectType(false)">取消</text> -->
					<text @click.stop="downSelectType(true)">确定</text>
				</view>
				<image class="select_type_img" src="../../../../static/images/delete.png" mode=""></image>
			</view>
			 
		</view>
		
		<view class="traces_data" v-show="isShowSelectTypes" @click="(() => {isShowSelectTypes = false})"> 
			<scroll-view scroll-y  class="traces_box" @click.stop>
				<block v-for="(item, index) in lecordingList" :key="index">
				    <trackNode :index="index" :lecordingListNum="lecordingList.length-1" :is-first="index===lecordingList.length-1" :is-newest="index===0" :is-main-node="item.isMainNode" :node-data="item"></trackNode>
				</block> 
			</scroll-view> 
			<image class="select_type_img" src="../../../../static/images/delete.png" mode=""></image>
		</view> 
		 
		<!-- <home></home> -->
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<!-- <payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id" :totalPrice='totalPrice'></payment> -->
	</view>
</template>
<style scoped lang="scss">
	.bt100{
		padding-bottom: 100rpx; 
		box-sizing: border-box;
	}
	.goodCall {
		color: #e93323;
		text-align: center;
		width: 100%;
		height: 86rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		line-height: 86rpx;
		background: #fff;

		.icon-kefu {
			font-size: 36rpx;
			margin-right: 15rpx;
		}

		/* #ifdef MP */
		button {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 86rpx;
			font-size: 30rpx;
			color: #e93323;
		}

		/* #endif */
	}

	.order-details .header {
		padding: 0 30rpx;
		height: 150rpx;
	}

	.order-details .header.on {
		background-color: #666 !important;
	}

	.order-details .header .pictrue {
		width: 110rpx;
		height: 110rpx;
	}

	.order-details .header .pictrue image {
		width: 100%;
		height: 100%;
	}

	.order-details .header .data {
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		margin-left: 27rpx;
	}

	.order-details .header .data.on {
		margin-left: 0;
	}

	.order-details .header .data .state {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 7rpx;
	}

	.order-details .header .data .time {
		margin-left: 20rpx;
	}

	.order-details .nav {
		background-color: #fff;
		font-size: 26rpx;
		color: #282828;
		padding: 25rpx 0;
	}

	.order-details .nav .navCon {
		padding: 0 40rpx;
	}

	.order-details .nav .on {
		color: #e93323;
	}

	.order-details .nav .progress {
		padding: 0 65rpx;
		margin-top: 10rpx;
	}

	.order-details .nav .progress .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #939390;
	}

	.order-details .nav .progress .iconfont {
		font-size: 25rpx;
		color: #939390;
		margin-top: -2rpx;
	}

	.order-details .address {
		font-size: 26rpx;
		color: #868686;
		background-color: #fff;
		margin-top: 13rpx;
		padding: 35rpx 30rpx;
	}

	.order-details .address .name {
		font-size: 30rpx;
		color: #282828;
		margin-bottom: 15rpx;
	}

	.order-details .address .name .phone {
		margin-left: 40rpx;
	}

	.order-details .line {
		width: 100%;
		height: 3rpx;
	}

	.order-details .line image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.change_delivery{ 
		position: relative;
		top: 20rpx;
		left: 72%;
		display: block;
		padding: 6rpx 20rpx;
		width: 200rpx;
		color: #fff;
		text-align: center;
		border-radius: 20rpx;
		background-color: #e93323;
	}

	.order-details .wrapper {
		background-color: #fff;
		margin-top: 12rpx;
		padding: 30rpx;
	}

	.order-details .wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.order-details .wrapper .item~.item {
		margin-top: 20rpx;
	}

	.order-details .wrapper .item .conter {
		color: #868686;
		width: 460rpx;
		text-align: right;
	}

	.order-details .wrapper .confirm_pay {
		display: inline-block;
		width: 100rpx;
		height: 40rpx;
		line-height: 36rpx;
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #e93323;
	}

	.order-details .wrapper .item .conter .copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 3rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;
	}

	.order-details .wrapper .actualPay {
		border-top: 1rpx solid #eee;
		margin-top: 30rpx;
		padding-top: 30rpx;
	}

	.order-details .wrapper .actualPay .money {
		font-weight: bold;
		font-size: 30rpx;
	}

	.order-details .courier_remarks {
		position: relative;
		padding: 20rpx;
		margin: 20rpx 0;
		background-color: #fff;

		& text:nth-child(1) {
			font-size: 32rpx;
		}

		& text:nth-child(3) {
			position: absolute;
			right: 20rpx;
			top: 80rpx;
			padding: 0 30rpx;
			height: 60rpx;
			text-align: center;
			color: #fff;
			line-height: 60rpx;
			border-radius: 30rpx;
			background-color: #e93323;
		}

		.textarea {
			margin-top: 20rpx;
			height: 80rpx;
			font-size: 28rpx;
			color: #999;
			border-bottom: 1rpx solid #f9f9f9;
		}

	}

	.order-details .courier_btn {
		// padding-left: 20rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		text {
			flex: 2;
			display: inline-block;
			margin: 0 20rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			height: 60rpx;
			text-align: center;
			color: #fff;
			line-height: 60rpx;
			border-radius: 30rpx;
			background-color: #e93323;
		}
		.del{
			// margin-right: 20rpx;
			background-color: #fff;
			color: #999;
			border: 1px solid #dedede;
		}
	}

	.order-details .footer {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.order-details .footer .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
	}

	.order-details .footer .bnt.cancel {
		color: #aaa;
		border: 1rpx solid #ddd;
	}

	.order-details .footer .bnt~.bnt {
		margin-left: 18rpx;
	}

	.order-details .writeOff {
		background-color: #fff;
		margin-top: 13rpx;
		padding-bottom: 30rpx;
	}

	.order-details .writeOff .title {
		font-size: 30rpx;
		color: #282828;
		height: 87rpx;
		border-bottom: 1px solid #f0f0f0;
		padding: 0 30rpx;
		line-height: 87rpx;
	}

	.order-details .writeOff .grayBg {
		background-color: #f2f5f7;
		width: 590rpx;
		height: 384rpx;
		border-radius: 20rpx 20rpx 0 0;
		margin: 50rpx auto 0 auto;
		padding-top: 55rpx;
		position: relative;
	}

	.order-details .writeOff .grayBg .written {
		position: absolute;
		top: 0;
		right: 0;
		width: 60rpx;
		height: 60rpx;
	}

	.order-details .writeOff .grayBg .written image {
		width: 100%;
		height: 100%;
	}

	.order-details .writeOff .grayBg .pictrue {
		width: 290rpx;
		height: 290rpx;
		margin: 0 auto;
	}

	.order-details .writeOff .grayBg .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .writeOff .gear {
		width: 590rpx;
		height: 30rpx;
		margin: 0 auto;
	}

	.order-details .writeOff .gear image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .writeOff .num {
		background-color: #f0c34c;
		width: 590rpx;
		height: 84rpx;
		color: #282828;
		font-size: 48rpx;
		margin: 0 auto;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;
		padding-top: 4rpx;
	}

	.order-details .writeOff .rules {
		margin: 46rpx 30rpx 0 30rpx;
		border-top: 1px solid #f0f0f0;
		padding-top: 10rpx;
	}

	.order-details .writeOff .rules .item {
		margin-top: 20rpx;
	}

	.order-details .writeOff .rules .item .rulesTitle {
		font-size: 28rpx;
		color: #282828;
	}

	.order-details .writeOff .rules .item .rulesTitle .iconfont {
		font-size: 30rpx;
		color: #333;
		margin-right: 8rpx;
		margin-top: 5rpx;
	}

	.order-details .writeOff .rules .item .info {
		font-size: 28rpx;
		color: #999;
		margin-top: 7rpx;
	}

	.order-details .writeOff .rules .item .info .time {
		margin-left: 20rpx;
	}

	.order-details .map {
		height: 86rpx;
		font-size: 30rpx;
		color: #282828;
		line-height: 86rpx;
		border-bottom: 1px solid #f0f0f0;
		margin-top: 13rpx;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.order-details .map .place {
		font-size: 26rpx;
		width: 176rpx;
		height: 50rpx;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.order-details .map .place .iconfont {
		font-size: 27rpx;
		height: 27rpx;
		line-height: 27rpx;
		margin: 2rpx 3rpx 0 0;
	}

	.order-details .address .name .iconfont {
		font-size: 34rpx;
		margin-left: 10rpx;
	}

	.refund {
		padding: 0 30rpx 30rpx;
		margin-top: 24rpx;
		background-color: #fff;

		.title {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #333;
			height: 86rpx;
			border-bottom: 1px solid #f5f5f5;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.con {
			padding-top: 25rpx;
			font-size: 28rpx;
			color: #868686;
		}

	}

	.select_type {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);

		.select_type_item {
			padding: 40rpx 20rpx;
			position: fixed;
			z-index: 100;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			border-radius: 20rpx;
			background-color: #f5f5f5;
			.select_type_img{
				position: absolute;
				right: -20rpx;
				top: -30rpx;
				width: 50rpx;
				height: 50rpx;
			}

			.cont_type {
				display: flex;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				color: #333;
			}
		}

		.select_cont {
			position: relative;
			top: 20rpx;
			height: 300rpx;
			font-size: 30rpx;
			line-height: 100rpx;
			color: #666;
			font-size: 28rpx;

			.select_area,
			.select_area_inp {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				border: 1px solid #9d9696;
				border-radius: 10rpx;

				.select_area_img {
					margin: auto 0;
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					vertical-align: middle;
				}

				.area_img_turn {
					transform: rotate(180deg);
					transition: all .5s;
				}

				.area_img_down {
					transform: rotate(0deg);
					transition: all .5s;
				}
			}

			.select_area_inp {
				width: 100%;
				font-size: 28rpx;
				margin-top: 40rpx;
				border-radius: 10rpx;
			}

			.area_list {
				position: absolute;
				margin-top: 10rpx;
				margin: 10rpx 0 0 140rpx;
				width: 420rpx;
				height: 300rpx;
				border-radius: 10rpx;
				background-color: #fff;
				border: 1px solid #9d9696;
				z-index: 10;

				.area_item {
					margin: 0 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					background-color: #fff;
				}
			}
		}

		.select_conts {
			height: 300rpx;
			font-size: 32rpx;
			line-height: 120rpx;

			.select_areas {
				display: flex;
				font-size: 26rpx;
				color: #333;

				input {
					padding-left: 20rpx;
					width: 60%;
					height: 60rpx;
					font-size: 26rpx;
					margin: auto 20rpx;
					border-radius: 10rpx;
					border: 1rpx solid #999;
				}
			}
		}

		.express_details {
			text-align: center;

			.express_tit {
				font-size: 32rpx;
			}

			.express_list {
				height: 600rpx;
				text-align: left;

				.express_liitem {
					margin: 30rpx 0;
					display: flex;

					& text:nth-child(1) {
						position: relative;
						width: 200rpx;
						font-size: 26rpx;
						color: #737070;

						&::before {
							position: absolute;
							content: '';
							right: 24rpx;
							width: 3rpx;
							height: 100rpx;
							background-color: #e9e9e9;
						}

						&::after {
							position: absolute;
							right: 20rpx;
							top: 0;
							content: '';
							width: 10rpx;
							height: 10rpx;
							background-color: #f96229;
							border-radius: 50%;
						}
					}

					& text:nth-child(2) {
						flex: 1;
					}
				}
			}
		}

		.change_order {
			height: 520rpx; 
			.change_items {
				display: flex;
				justify-content: space-around;
				height: 80rpx;
				line-height: 52rpx;

				text {
					width: 180rpx;
				}

				.change_inp {
					flex: 1;
					margin-left: 20rpx;
					padding-left: 20rpx;
					height: 70%;
					color: #333;
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 1rpx solid #dcdee2;
				}
			}
		}
		.change_peisong{
			height: 400rpx;
			.select_area,
			.select_area_inp {
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				border: 1px solid #9d9696;
				border-radius: 10rpx;
			
				.select_area_img {
					margin: auto 0;
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					vertical-align: middle;
				}
			
				.area_img_turn {
					transform: rotate(180deg);
					transition: all .5s;
				}
			
				.area_img_down {
					transform: rotate(0deg);
					transition: all .5s;
				}
			}
			.area_list {
				position: absolute;
				margin-top: 10rpx;
				width: 440rpx;
				height: 300rpx;
				border-radius: 10rpx;
				background-color: #fff;
				border: 1px solid #9d9696;
				z-index: 10;
				.area_item {
					margin: 0 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					background-color: #fff;
				}
			}
		}
		.select_xz {
			width: 100%;
			display: flex;

			text {
				flex: 1;
				margin: 0 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 20rpx;
				color: #fff;
				background-image: linear-gradient(to right, #f62c2c, #f96829);
			}

			& text:last-child {
				background: #22ac38;
			}
		}
	}
</style>

<script>
	import {
		getDetails,
		express,
		remark,
		delOeder,
		sendGoods,
		payOffline,
		getLog,
		editInfo,
		editShippingInformation
	} from '../../../../api/sellOrder.js'

	import {
		getOrderDetail,
		orderAgain,
		orderTake,
		orderDel,
		orderCancel
	} from '@/api/order.js';
	import {
		openOrderRefundSubscribe
	} from '@/utils/SubscribeMessage.js';
	import home from '@/components/home';
	import payment from '@/components/payment';
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	import trackNode from '@/components/trachkNode/trackNode.vue' 
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	export default {
		components: {
			payment,
			home,
			trackNode,
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				remarksInfo: '', // 备注信息
				order_id: '',
				// 订单id
				id: '',
				confirmPay: '', // 支付状态
				deliveryName: '选择快递公司',
				isShowSelectChild: false,
				isShowSelectType: false, // 弹框
				isShowSelectTypes: false,
				// 发货 送货切换
				selectConts: 1,
				// 快递单号
				deliveryId: '',
				// 送货人姓名
				shDeliveryName: '',
				// 送货人电话
				shDeliveryId: '',
				// 快递公司 列表
				expressList: [],
				// 发送货类型
				type: 1,
				// 快递详情
				lecordingList: [],
				evaluate: 0,
				cartInfo: [], //购物车产品
				orderInfo: {
					system_store: {},
					_status: {}
				}, //订单详情
				system_store: {},
				isGoodsReturn: false, //是否为退款订单
				status: {}, //订单底部按钮状态
				isClose: false, 
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					// {
					// 	name: "余额支付",
					// 	icon: "icon-yuezhifu",
					// 	value: 'yue',
					// 	title: '可用余额:',
					// 	number: 0
					// },
				],
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				items: [{
						value: '1',
						name: '发货',
						checked: 'true'
					},
					{
						value: '2',
						name: '送货',
					}
				],
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad: function(options) {
			if (options.id) {
				this.$set(this, 'id', options.id);
			}
		},
		onShow() {
			if (this.isLogin) {
				this.getDetails();
			} else {
				toLogin();
			}
		},
		onHide: function() {
			this.isClose = true;
		},
		onReady: function() {
			// #ifdef H5
			this.$nextTick(function() {
				const clipboard = new ClipboardJS(".copy-data");
				clipboard.on("success", () => {
					this.$util.Tips({
						title: '复制成功'
					});
				});
			});
			// #endif
		},
		methods: {
			goGoodCall() {
				let self = this
				uni.navigateTo({
					url: `/pages/customer_list/chat?orderId=${self.order_id}`
				})
			},
			openSubcribe: function(e) {
				let page = e;
				uni.showLoading({
					title: '正在加载',
				})
				openOrderRefundSubscribe().then(res => {
					uni.hideLoading();
					uni.navigateTo({
						url: page,
					});
				}).catch(() => {
					uni.hideLoading();
				});
			},
			/**
			 * 事件回调
			 * 
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
			},
			/**
			 * 拨打电话
			 */
			makePhone: function() {
				uni.makePhoneCall({
					phoneNumber: this.system_store.phone
				})
			},
			/**
			 * 打开地图
			 * 
			 */
			showMaoLocation: function() {
				if (!this.system_store.latitude || !this.system_store.longitude) return this.$util.Tips({
					title: '缺少经纬度信息无法查看地图！'
				});
				uni.openLocation({
					latitude: parseFloat(this.system_store.latitude),
					longitude: parseFloat(this.system_store.longitude),
					scale: 8,
					name: this.system_store.name,
					address: this.system_store.address + this.system_store.detailed_address,
					success: function() {

					},
				});
			},
			/**
			 * 关闭支付组件
			 * 
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 打开支付组件
			 * 
			 */
			pay_open: function() {
				this.pay_close = true;
				this.pay_order_id = this.orderInfo.order_id;
				this.totalPrice = this.orderInfo.pay_price;
			},
			/**
			 * 支付成功回调
			 * 
			 */
			pay_complete: function() {
				this.pay_close = false;
				this.pay_order_id = '';
				this.getDetails();
			},
			/**
			 * 支付失败回调
			 * 
			 */
			pay_fail: function() {
				this.pay_close = false;
				this.pay_order_id = '';
			},
			/**
			 * 登录授权回调
			 * 
			 */
			onLoadFun: function() {
				this.getDetails();
			},
			/**
			 * 获取订单详细信息
			 * 
			 */
			getDetails() {
				let that = this;
				uni.showLoading({
					title: "正在加载中"
				});
				getDetails(that.id).then(res => { 
					if(res.status == 200){
						uni.hideLoading();
						let statusPay = ''
						statusPay = res.data.result.orderInfo.paid === 1 ? '已支付' : '未支付'
						that.$set(that, 'confirmPay', statusPay ) 
						that.$set(that, 'orderInfo', res.data.result.orderInfo);  
						that.$set(that, 'deliveryId', res.data.result.orderInfo.delivery_id)
						that.$set(that, 'cartInfo', res.data.cartInfo);
						that.$set(that, 'evaluate', _type == 3 ? 3 : 0);
						that.$set(that, 'system_store', res.data.system_store);
						
						if (this.orderInfo.refund_status != 0) {
							this.isGoodsReturn = true;
						} 
						that.getOrderStatus();
					}else{
						uni.hideLoading();
						that.$util.Tips({
							title: res.msg
						},{
							tab: 3,
							url: 1
						});
					}
				 
				}).catch(err => {
					uni.hideLoading();
					that.$util.Tips({
						title: err
					});
				});
			},
			/**
			 * 
			 * 剪切订单号
			 */
			// #ifndef H5
			copy: function() {
				let that = this;
				uni.setClipboardData({
					data: this.orderInfo.order_id
				});
			},
			// #endif
			/**
			 * 打电话
			 */
			goTel: function() {
				uni.makePhoneCall({
					phoneNumber: this.orderInfo.delivery_id
				})
			},
			/**
			 * 设置底部按钮
			 * 
			 */
			getOrderStatus: function() {
				let orderInfo = this.orderInfo || {},
					_status = orderInfo._status || {
						_type: 0
					},
					status = {};
				let type = parseInt(_status._type),
					delivery_type = orderInfo.delivery_type,
					seckill_id = orderInfo.seckill_id ? parseInt(orderInfo.seckill_id) : 0,
					bargain_id = orderInfo.bargain_id ? parseInt(orderInfo.bargain_id) : 0,
					combination_id = orderInfo.combination_id ? parseInt(orderInfo.combination_id) : 0;
				status = {
					type: type == 9 ? -9 : type,
					class_status: 0
				};
				if (type == 1 && combination_id > 0) status.class_status = 1; //查看拼团
				if (type == 2 && delivery_type == 'express') status.class_status = 2; //查看物流
				if (type == 2) status.class_status = 3; //确认收货
				if (type == 4 || type == 0) status.class_status = 4; //删除订单
				if (!seckill_id && !bargain_id && !combination_id && (type == 3 || type == 4)) status.class_status = 5; //再次购买
				this.$set(this, 'status', status);
			},
			/**
			 * 去拼团详情
			 * 
			 */
			goJoinPink: function() {
				uni.navigateTo({
					url: '/pages/activity/goods_combination_status/index?id=' + this.orderInfo.pink_id,
				});
			},
			confirmOrder: function() {
				let that = this;
				uni.showModal({
					title: '确认收货',
					content: '为保障权益，请收到货确认无误后，再确认收货',
					success: function(res) {
						if (res.confirm) {
							orderTake(that.order_id).then(res => {
								return that.$util.Tips({
									title: '操作成功',
									icon: 'success'
								}, function() {
									that.getOrderInfo();
								});
							}).catch(err => {
								return that.$util.Tips({
									title: err
								});
							})
						}
					}
				})
			},
			cancelOrder() {
				let self = this
				uni.showModal({
					title: '提示',
					content: '确认取消该订单?',
					success: function(res) {
						if (res.confirm) {
							orderCancel(self.orderInfo.order_id)
								.then((data) => {
									self.$util.Tips({
										title: data.msg
									}, {
										tab: 3
									})
								})
								.catch(() => {
									self.getDetail();
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 提交备注
			submitNotes() {
				remark(this.id, this.remarksInfo).then(res => {
					if (res.data.status == 200) {
						this.$util.Tips({
							title: res.msg
						})
						this.getDetails()
					} else {
						this.$util.Tips({
							title: res.msg
						})
					}
				})
			},
			// 删除订单
			deleteOrder() {
				delOeder(this.id).then(res => {
					if (res.data.status == 200) {
						this.$util.Tips({
							title: res.msg
						})
					} else {
						this.$util.Tips({
							title: res.msg
						})
					}
				})
			},
			// 发货
			shipOrder() {
				this.selectConts = 1
				this.isShowSelectType = !this.isShowSelectType
			},
			// 更改支付状态
			changeConfirmPay() {
				payOffline(this.id).then(res => {
					if (res.status == 200) {
						this.$util.Tips({
							title: res.msg
						})
						this.$forceUpdate()
					} else {
						this.$util.Tips({
							title: res.msg
						})
					}
				})
			},
			// 开启关闭二级区域选择菜单
			selectAreaChilds() {
				// console.log(1)
				express().then(res => {
					if (res.data.status == 200) {
						this.expressList = res.data.result 
					}
				})
				this.isShowSelectChild = !this.isShowSelectChild
			},
			// 关闭弹框
			downSelectType(type) {
				let that = this
				// 如果是确认按钮并且不是订单记录弹框
				if (type && that.selectConts !== 3 && that.selectConts !== 4 && that.selectConts !==5) {
					let data = {
						// 订单id
						id: that.id,
						// 快递单号
						delivery_id: that.deliveryId,
						// 快递名称
						delivery_name: that.deliveryName,
						// 送货人电话号
						sh_delivery_id: that.shDeliveryId,
						// 送货人姓名
						sh_delivery_name: that.shDeliveryName,
						// 发送货类型
						type: that.type
					}
					sendGoods(data.id, data).then(res => {
						if (res.status == 200) {
							this.$util.Tips({
								title: res.msg
							});
							this.isShowSelectType = false
							this.getDetails()
							// this.getMyAreaName()
						} else {
							this.$util.Tips({
								title: res.msg
							});
							this.isShowSelectType = false
							this.deliveryId = ''
						}
					})
				} else if (type && that.selectConts == 4){  
					let data = { 
						order_id: that.orderInfo.order_id,
						total_price: that.orderInfo.total_price,
						pay_postage: that.orderInfo.pay_postage,
						pay_price:that.orderInfo.pay_price,
						total_postage:that.orderInfo.total_postage,
					    gain_integral:that.orderInfo.gain_integral
					} 
					editInfo(that.id, data).then(res => { 
						if(res.status == 200){
							this.$util.Tips({
								title: res.msg
							}) 
							that.isShowSelectType = false
							setTimeout(() => {
								that.getDetails()
							}, 500)
						}else{
							this.$util.Tips({
								title: res.msg
							})
						}
					})
				} else if (type && that.selectConts == 5){
					if(that.deliveryName == '选择快递公司'){
						this.$util.Tips({
							title: '选择快递公司'
						})
						return 
					} 
					let data = {
						delivery_id:  that.deliveryId,
						delivery_name: that.deliveryName 
					}  
					editShippingInformation(that.id, data).then(res => { 
						if(res.data.status == 200){
							this.$util.Tips({
								title: res.msg
							})
							that.deliveryName = '选择快递公司'
							that.isShowSelectType = false
							setTimeout(() => {
								that.getDetails()
							},500)
						}else{
							this.$util.Tips({
								title: res.msg
							})
						}
					})
				}
				
				else {
					this.isShowSelectType = false
					this.shDeliveryName = ''
					this.shDeliveryId = ''
				}
			},
			// 单选
			radioChange(res) {
				if (res.detail.value == 1) {
					this.type = res.detail.value
					this.selectConts = 1
					// 送货人姓名
					this.shDeliveryName = ''
					// 送货人电话
					this.shDeliveryId = ''
				} else if (res.detail.value == 2) {
					this.selectConts = 2
					this.type = res.detail.value
					// 快递公司
					this.deliveryName = '选择快递公司'
				}
			},
			// 选择快递公司
			currentAreaName(item) { 
				this.deliveryName = item.value
				this.isShowSelectChild = false
			},
			// 查看订单记录
			orderRecording() {
				this.selectConts = 3
				this.isShowSelectTypes = true
				getLog(this.id).then(res => {
					if (res.data.status == 200) { 
						this.lecordingList = []
						res.data.result.map((item) => { 
							let dataList = {createTime: item.change_time, acceptStation: item.change_message, oid: item.oid}   
							this.lecordingList.push(dataList)   
						}) 
					} else {
						this.$util.Tips({
							title: res.msg
						});
					}
				})
			},
			// 修改订单信息
			changeOrder() {
				this.selectConts = 4
				this.isShowSelectType = true
			},
			// 修改配送信息
			changeDelivery(){  
				this.selectConts = 5 
				this.isShowSelectType = true
			},
			// 立即退款
			refundNow(){  
				let data = {
					id:this.id,
					order_id: this.orderInfo.order_id
				}  
				setTimeout(() => {
					uni.$emit('updata', data)
				},200)
				uni.navigateTo({
					url: '../refund_details/index?id=' + this.id
				})
			}
		}
	}
</script>

<style lang="less">
	.qs-btn {
		width: auto;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
		padding: 0 3%;
		color: #aaa;
		border: 1px solid #ddd;
		margin-right: 20rpx;
	}
	.traces_data{ 
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background:rgba(0, 0, 0, 0.4);
		.traces_box{  
			padding: 20rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 600rpx;
			height: 700rpx;
			border-radius: 10rpx;
			background-color: #fff; 
		}
		.select_type_img{
			position: absolute;
			right: 50rpx;
			top: 380rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
